<template>
  <div class="common-table">
    <div class="table-item">
      <formItem title="名称">
        <template v-slot:rightText>
          <span>{{ formObj.title }}</span>
        </template>
      </formItem>
      <formItem title="位置">
        <template v-slot:rightText>
          <span>{{ formObj.location }}</span>
        </template>
      </formItem>
      <formItem title="面积">
        <template v-slot:rightText>
          <span>{{ formObj.area }}</span>
        </template>
      </formItem>
    </div>
    <div class="table-item">
      <formItem title="区镇">
        <template v-slot:rightText>
          <span>{{ formObj.town }}</span>
        </template>
      </formItem>
      <formItem title="类型">
        <template v-slot:rightText>
          <span>{{ formObj.type }}</span>
        </template>
      </formItem>
      <formItem title="用途">
        <template v-slot:rightText>
          <span>{{ formObj.class }}</span>
        </template>
      </formItem>
    </div>
    <div class="table-item">
      <div class="table-full-text">
        <div class="left">
          <span>红线数据</span>
        </div>
        <div class="right">
          <div class="red-line">
            <div>
              <el-button type="primary" @click="downloadKml">红线数据导出</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="title-item">
      <div class="first">
        土地污染状况调查
      </div>
    </div>
    <div class="table-item">
      <formItem title="调查主体">
        <template v-slot:right>
          <el-select v-model="formObj.name" popper-class="big-screnn-popper" placeholder="请选择调查主体">
            <el-option
                v-for="item in userOption"
                :key="item.value"
                :label="item.value"
                :value="item.value"
            />
          </el-select>
        </template>
      </formItem>
      <formItem title="检测单位">
        <template v-slot:right>
          <el-select v-model="formObj.company" popper-class="big-screnn-popper" placeholder="请选择检测单位">
            <el-option
                v-for="item in companyOption "
                :key="item.value"
                :label="item.value"
                :value="item.value"
            />
          </el-select>
        </template>
      </formItem>
      <formItem title="调查进度">
        <template v-slot:right>
          <el-select :class="selectClass" v-model="formObj.process" popper-class="big-screnn-popper"
                     placeholder="请选择调查进度">
            <el-option
                v-for="item in processOption"
                :key="item.value"
                :label="item.value"
                :value="item.value"
            />
          </el-select>
        </template>
      </formItem>
      <!-- 为了保证space-between样式能完整生效，空的formitem需要加一个div放这里即可 -->
      <div class="empty-form-item"></div>
    </div>
    <div class="table-item">
      <formItem title="委托时间">
        <template v-slot:right>
          <el-date-picker
              v-model="formObj.beginTime"
              type="date"
              placeholder="选择日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
          />
        </template>
      </formItem>
      <formItem title="完成期限">
        <template v-slot:right>
          <el-date-picker
              v-model="formObj.planTime"
              type="date"
              placeholder="选择日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
          />
        </template>
      </formItem>
      <formItem title="完成时间">
        <template v-slot:right>
          <el-date-picker
              v-model="formObj.endTime"
              type="date"
              placeholder="选择日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
          />
        </template>
      </formItem>
      <!-- 为了保证space-between样式能完整生效，空的formitem需要加一个div放这里即可 -->
      <div class="empty-form-item"></div>
    </div>
    <div class="table-item">
      <div class="table-full-text">
        <div class="left">
          <span>调查报告</span>
        </div>
        <div class="right">
          <div class="red-line">
            <div class="red-line-text" v-if="formObj.fileName !== ''">
              <el-input v-model="formObj.fileName" placeholder="请输入名称" type="text"/>
            </div>
            <el-upload
                action='api/upload/report'
                method="post"
                :http-request="Data"
                style="width: 10%"
                :show-file-list="false"
            >
              <el-button type="primary">上传</el-button>
            </el-upload>
            <div>
              <el-button type="primary" @click="download">下载</el-button>
              <el-button type="primary" @click="preview">浏览</el-button>
              <el-button type="primary" @click="deleteWord">取消上传</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="title-item">
      <div class="first">
        压覆矿产资源调查
      </div>
      <div class="second">
        地下文物资源调查
      </div>
      <div class="last">
        地质灾害危险性评估
      </div>
    </div>
    <div class="table-item">
      <formItem title="完成情况">
        <template v-slot:right>
          <el-select v-model="formObj.kcSurvey" popper-class="big-screnn-popper" placeholder="已完成">
            <el-option
                v-for="item in kcSurvey "
                :key="item.value"
                :label="item.value"
                :value="item.value"
            />
          </el-select>
        </template>
      </formItem>
      <formItem title="完成情况">
        <template v-slot:right>
          <el-select v-model="formObj.wwSurvey" popper-class="big-screnn-popper" placeholder="请选择">
            <el-option
                v-for="item in survey"
                :key="item.value"
                :label="item.value"
                :value="item.value"
            />
          </el-select>
        </template>
      </formItem>
      <formItem title="完成情况">
        <template v-slot:right>
          <el-select v-model="formObj.zhSurvey" popper-class="big-screnn-popper" placeholder="无需评价">
            <el-option
                v-for="item in survey"
                :key="item.value"
                :label="item.value"
                :value="item.value"
            />
          </el-select>
        </template>
      </formItem>
      <!-- 为了保证space-between样式能完整生效，空的formitem需要加一个div放这里即可 -->
      <div class="empty-form-item"></div>
    </div>
    <div class="title-item">
      <div class="first">
        交通影响预评价
      </div>
      <div class="second">
        气候可行性论证
      </div>
      <div class="last">
        地震安全性评价
      </div>
    </div>
    <div class="table-item">
      <formItem title="完成情况">
        <template v-slot:right>
          <el-select v-model="formObj.jtSurvey" popper-class="big-screnn-popper" placeholder="无需评价">
            <el-option
                v-for="item in survey"
                :key="item.value"
                :label="item.value"
                :value="item.value"
            />
          </el-select>
        </template>
      </formItem>
      <formItem title="完成情况">
        <template v-slot:right>
          <el-select v-model="formObj.qhSurvey" popper-class="big-screnn-popper" placeholder="无需评价">
            <el-option
                v-for="item in survey"
                :key="item.value"
                :label="item.value"
                :value="item.value"
            />
          </el-select>
        </template>
      </formItem>
      <formItem title="完成情况">
        <template v-slot:right>
          <el-select v-model="formObj.dzSurvey" popper-class="big-screnn-popper" placeholder="无需评价">
            <el-option
                v-for="item in survey"
                :key="item.value"
                :label="item.value"
                :value="item.value"
            />
          </el-select>
        </template>
      </formItem>
      <!-- 为了保证space-between样式能完整生效，空的formitem需要加一个div放这里即可 -->
      <div class="empty-form-item"></div>
    </div>

  </div>
</template>
<script lang="ts">
import {reactive, defineComponent, getCurrentInstance, onMounted, watch, ref, computed} from 'vue'
import formItem from "@/components/commonFomItem/index.vue";
import type {UploadProps} from 'element-plus'
import {ElNotification} from 'element-plus'
import {useRouter} from "vue-router";
import DataJson from "../../../public/config/data.json"
export default defineComponent({
  components: {formItem},
  props: ['confirmState', 'index', 'PassState', 'newState', 'stateId'],
  emits: ["receiveProgress"],
  setup(props, context) {
    const userType = localStorage.getItem("userType")
    const loginName = localStorage.getItem("loginName");
    //获取当前时间
    const getCurrentTime = () => {
      let date = new Date();
      //年
      let year = date.getFullYear().toString();
      //月份是从0月开始获取的，所以要+1;
      let month = ''
      if ((date.getMonth() + 1) < 10) {
        month = '0' + (date.getMonth() + 1).toString()
      } else {
        month = (date.getMonth() + 1).toString()
      }
      //日
      let day = date.getDate().toString();
      //时
      let hour = date.getHours().toString();


      return year + '年' + month + '月' + day + '日' + hour + '时'
    }
    const router = useRouter()
    const userOption = reactive(DataJson).evaluationUser
    const processOption = reactive(DataJson).evaluationProcess
    const companyOption = reactive(DataJson).evaluationCompany
    const kcSurvey = reactive(DataJson).kcSurvey
    const survey = reactive(DataJson).survey
    const formObj = reactive({
      title: '',
      location: '',
      area: '',
      town: '',
      type: '',
      class: '',

      name: '',
      company: '',
      process: '',
      beginTime: '',
      planTime: '',
      endTime: '',
      kcSurvey: '已完成',
      wwSurvey: '',
      zhSurvey: '无需评价',
      jtSurvey: '无需评价',
      qhSurvey: '无需评价',
      dzSurvey: '无需评价',
      inspect: '',
      url: '',
      fileName: ''
    })
    const selectClass = computed(() => {
      let defaultClass = ''
      switch (formObj.process) {
        case '完成':
          defaultClass = 'red'
          break;
        case '已委托':
          defaultClass = 'orange'
          break;
        case '未进场':
          defaultClass = 'orange'
          break;
        case '进场采样':
          defaultClass = 'orange'
          break;
        case '未选择':
          defaultClass = 'blue'
          break;
        default:
          break;
      }
      return `customer-select-color${defaultClass}`
    })
    //红线数据导出
    const downloadKml = () => {
      appContext.config.globalProperties.axios({
        url: `api/downloadKml`,
        method: 'post',
        data: formObj,
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("landId", props.index);
          return oMyForm;
        }],
        responseType: "blob",
      }).then((response) => {
        let blob = new Blob([response.data], {type: "text/xml"});
        let url = window.URL.createObjectURL(blob); // 创建一个临时的url指向blob对象
        let a = document.createElement("a");
        a.href = url;
        a.download = formObj.title + ".kml"
        a.click();
        // 释放这个临时的对象url
        window.URL.revokeObjectURL(url);
      }).catch(() => {
        ElNotification({
          title: '导出数据',
          message: "数据导出失败",
          type: 'warning',
          position: 'top-left',
          offset: 300,
        })
      })
    }
    //浏览内容
    const preview = () => {
      if (formObj.url === '' || formObj.fileName === '') {
        ElNotification({
          title: '预览内容',
          message: "文件地址有问题，请检查文件",
          type: 'warning',
          position: 'top-left',
          offset: 300,
        })
      } else {
        if (formObj.fileName.includes("pdf")) {
          window.open(`api/explore/getFile?path=${formObj.url}&name=${formObj.fileName}`, '_blank')
        } else {
          const newPage = router.resolve({
            path: '/preview',  // 跳转的页面路由
            query: { // 要传的参数
              url: formObj.url + "//" + formObj.fileName,
              index: props.index
            }
          })
          window.open(newPage.href, '_blank')
        }
      }

    }
    //下载文件
    const download = () => {
      appContext.config.globalProperties.axios({
        url: `api/downloadWord`,
        method: 'post',
        data: formObj,
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("landId", props.index);
          oMyForm.append("path", formObj.url + "\\" + formObj.fileName);
          return oMyForm;
        }],
        responseType: "blob",
      }).then((response) => {
        let blob = new Blob([response.data], {type: "application/msword;"});
        let url = window.URL.createObjectURL(blob); // 创建一个临时的url指向blob对象
        let a = document.createElement("a");
        a.href = url;
        a.download = formObj.fileName;
        a.click();
        // 释放这个临时的对象url
        window.URL.revokeObjectURL(url);
      }).catch(() => {
        ElNotification({
          title: '下载文件',
          message: "文件未上传，请上传文件",
          type: 'warning',
          position: 'top-left',
          offset: 300,
        })
      })
    }
    //删除文件
    const deleteWord = () => {
      if (formObj.fileName === '') {
        ElNotification({
          title: '删除文件',
          message: "文件未上传，请上传文件",
          type: 'warning',
          position: 'top-left',
          offset: 300,
        })
      } else {
        appContext.config.globalProperties.axios({
          url: `api/delete/word`,
          method: 'post',
          data: formObj,
          transformRequest: [function () {
            let oMyForm = new FormData();
            oMyForm.append("path", formObj.url);
            oMyForm.append("name", formObj.fileName);
            return oMyForm;
          }]
        }).then(() => {
          formObj.fileName = ''
          formObj.url = ''
          ElNotification({
            title: '删除文件',
            message: "删除成功",
            type: 'success',
            position: 'top-left',
            offset: 300,
          })
        })
      }
    }
    //传送url
    const Data = (Option) => {
      appContext.config.globalProperties.axios({
        url: `api/upload/report`,
        method: 'post',
        data: formObj,
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("file", Option.file);
          oMyForm.append("landId", props.index);
          oMyForm.append("infoDate", getCurrentTime());
          oMyForm.append("userType",userType);
          oMyForm.append("content", loginName +"于"+getCurrentTime()+"，在"+formObj.title+"地块评估评价阶段上传了");
          return oMyForm;
        }]
      }).then((response) => {
        formObj.fileName = Option.file.name
        formObj.url = response.data
        ElNotification({
          title: '上传文件',
          message: "上传成功",
          type: 'success',
          position: 'top-left',
          offset: 300,
        })
      })
    }
    //确定键
    watch(() => props.confirmState, () => {
      pushData()
      context.emit('receiveProgress', 3)
    })
    const pushData = () => {
      appContext.config.globalProperties.axios({
        url: `api/insert/evaluation`,
        method: 'post',
        data: formObj,
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("landId", props.index);
          oMyForm.append("name", formObj.name);
          oMyForm.append("company", formObj.company);
          oMyForm.append("process", formObj.process);
          oMyForm.append("beginTime", formObj.beginTime);
          oMyForm.append("planTime", formObj.planTime);
          oMyForm.append("endTime", formObj.endTime);
          oMyForm.append("kcSurvey", formObj.kcSurvey);
          oMyForm.append("wwSurvey", formObj.wwSurvey);
          oMyForm.append("zhSurvey", formObj.zhSurvey);
          oMyForm.append("jtSurvey", formObj.jtSurvey);
          oMyForm.append("qhSurvey", formObj.qhSurvey);
          oMyForm.append("dzSurvey", formObj.dzSurvey);
          oMyForm.append("stateId", props.stateId);
          oMyForm.append("url", formObj.url);
          oMyForm.append("fileName", formObj.fileName);
          return oMyForm;
        }]
      }).then(() => {
        ElNotification({
          title: '修改数据',
          message: "修改成功",
          type: 'success',
          position: 'top-left',
          offset: 300,
        })
      })
    }


    // //通过键
    // watch(() => props.PassState, () => {
    //   passData()
    // })
    // const passData = () => {
    //   appContext.config.globalProperties.axios({
    //     url: `api/pass/evaluation/2`,
    //     method: 'post',
    //     data: formObj,
    //     transformRequest: [function () {
    //       let oMyForm = new FormData();
    //       oMyForm.append("landId", props.index);
    //       oMyForm.append("name", formObj.name);
    //       oMyForm.append("company", formObj.company);
    //       oMyForm.append("process", formObj.process);
    //       oMyForm.append("beginTime", formObj.beginTime);
    //       oMyForm.append("planTime", formObj.planTime);
    //       oMyForm.append("endTime", formObj.endTime);
    //       oMyForm.append("kcSurvey", formObj.kcSurvey);
    //       oMyForm.append("wwSurvey", formObj.wwSurvey);
    //       oMyForm.append("zhSurvey", formObj.zhSurvey);
    //       oMyForm.append("jtSurvey", formObj.jtSurvey);
    //       oMyForm.append("qhSurvey", formObj.qhSurvey);
    //       oMyForm.append("dzSurvey", formObj.dzSurvey);
    //       oMyForm.append("stateId", props.stateId);
    //       return oMyForm;
    //     }]
    //   })
    // }
    watch(() => props.newState, () => {
      reload()
    })

    const reload = () => {
      appContext.config.globalProperties.axios.post(`api/landSearch/${props.index}`).then((response) => {
        response.data.forEach(item => {
          formObj.class = item.landType
          formObj.title = item.bz
          formObj.town = item.town
          formObj.location = item.landLoc
          formObj.area = item.landArea
          formObj.type = item.type
        })
      })
    }

    const {appContext} = getCurrentInstance();
    onMounted(() => {
      reload()
    })

    return {
      userOption,
      processOption,
      kcSurvey,
      survey,
      formObj,
      pushData,
      downloadKml,
      reload,
      preview,
      download,
      deleteWord,
      Data,
      companyOption,
      selectClass
    }
  }
})
</script>


<style  lang="scss">
.common-table {
  .table-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    .table-full-text {
      display: flex;
      width: 100%;
      align-items: center;

      .left {
        color: rgba(240, 245, 255, 0.95);
        padding-right: 10px;
        width: 61px;
      }

      .right {
        flex: 1;

        .el-textarea {
          color: #e9e9e9;
          --el-input-text-color: #edffff;
        }

        .red-line {
          display: flex;
          //align-items: center;
          .red-line-text {
            padding-right: 12px;
            color: #e9e9e9;

            .el-input {
              --el-input-text-color: #ffffff;
            }
          }
        }
      }
    }
    .common-form-item{
      .customer-select-colororange {
        .el-input__inner {
          color: #F7A95D;
        }
      }
      .customer-select-colorred {
        .el-input__inner {
          color:red;
        }
      }
      .customer-select-colorblue {
        .el-input__inner {
          color:blue;
        }
      }
    }
  }

  .title-item {
    display: flex;
    align-items: start;
    justify-content: left;
    margin-bottom: 20px;

    .first {
      width: 130px;
      color: rgba(240, 245, 255, 0.95);
      font-size: 16px;
      line-height: 26px;
    }

    .second {
      margin-left: 20%;
      width: 130px;
      color: rgba(240, 245, 255, 0.95);
      font-size: 16px;
      line-height: 26px;
    }

    .last {
      margin-left: 18%;
      color: rgba(240, 245, 255, 0.95);
      font-size: 16px;
      line-height: 26px;
    }

  }

  .empty-form-item {
    width: 280px;
  }

  .tips-text {
    margin-left: 62px;
    margin-top: -16px;
    color: #e9e9e9;
  }
}
</style>
